<template>
  <div class="produceFac">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>添加</div>
        <i class="el-icon-close" @click="handleCloseDialog" />
      </div>
      <div class="produceFac-main">
        <div class="con m-t-20">
          <div class="con-row">
            <div class="inputLable inputLable1 flex flexac">
              <span class="name"><span class="mustval">*</span>用户设备类型：</span>
              <el-input class="input" placeholder="请输入用户设备类型" value="电梯" readonly />
            </div>
          </div>
          <div class="con-row">
            <div class="inputLable inputLable1 flex flexac">
              <span class="name"><span class="mustval">*</span>制造商名称：</span>
              <el-input v-model="addFactory.name" class="input" placeholder="请输入制造商名称" />
            </div>
          </div>
          <div class="con-row">
            <div class="inputLable inputLable1 flex flexac">
              <span class="name"><span class="mustval">*</span>制造商简称：</span>
              <el-input v-model="addFactory.nameSimple" class="input" placeholder="请输入制造商简称" />
            </div>
          </div>
          <div class="con-row">
            <div class="inputLable inputLable1 flex flexac">
              <span class="name">联系人：</span>
              <el-input v-model="addFactory.contacts" class="input" placeholder="请输入联系人" />
            </div>
          </div>
          <div class="con-row">
            <div class="inputLable inputLable1 flex flexac">
              <span class="name">联系人电话：</span>
              <el-input v-model="addFactory.phone" class="input" placeholder="请输入联系人电话" />
            </div>
          </div>
          <div class="con-row">
            <div class="inputLable inputLable1 flex flexac">
              <span class="name">地址：</span>
              <el-input v-model="addFactory.address" class="input" placeholder="请输入地址" />
            </div>
          </div>
          <div class="con-row">
            <div class="inputLable inputLable1 flex flexac flexaifs">
              <span class="name">描述：</span>
              <!-- <el-input class="input" placeholder="请输入描述"></el-input> -->
              <textarea v-model="addFactory.remark" class="input textarea" />
            </div>
          </div>
        </div>
        <div class="flex flextc flexac footer m-t-35 m-l-65">
          <el-button v-if="!isEdit" class="btn saveBtn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
          <el-button v-else type="success" class="btn m-r-30 el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
          <el-button class="btn clsoeBtn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { createFactureAdd, factureUpdate } from '@/api/elevator/facturer'
import { showNotice } from '@/utils/toolclass'

export default {
  components: {

  },
  props: {
    addFactory: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean
    }
  },
  data() {
    return {

    }
  },
  watch: {
    editFactory: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  },
  created() {},
  methods: {
    handleSave(type) {
      if (!(/^\S+$/.test(this.addFactory.name))) {
        showNotice('error', '提示', '请输入制造商名称')
        return
      }
      if (!(/^\S+$/.test(this.addFactory.nameSimple))) {
        showNotice('error', '提示', '请输入制造商简称')
        return
      }
      if (!(/^\S+$/.test(this.addFactory.contacts))) {
        showNotice('error', '提示', '请输入联系人姓名')
        return
      }
      if (!(/^\S+$/.test(this.addFactory.phone))) {
        showNotice('error', '提示', '请输入联系人电话')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.addFactory.phone))) {
        showNotice('error', '提示', '手机号格式错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.addFactory.address))) {
        showNotice('error', '提示', '请输入联系地址')
        return
      }
      if (type === 0) {
        this.handleSimpleViewAdd(this.addFactory)
      } else {
        this.handleUpdate(this.addFactory)
      }
    },
    // 新增厂家
    handleSimpleViewAdd(data) {
      createFactureAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '添加失败!')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    // 修改厂家
    handleUpdate(data) {
      factureUpdate(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '修改成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '修改失败!')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import '@/styles/public.scss';

.produceFac {
  width: 600px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  min-height: 500px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin: 0 auto;
  .panelWrap {
    height: 100%;
    position: absolute;
    width: 100%;
    .produceFac-main {
      .con {
        .con-row {
          padding: 10px 0 0 0;
          .inputLable {
            .name {
              width: 36%;
              text-align: right;
            }
            .input {
              margin-left: 3px;
            }
          }
        .textarea {
          width: 260px !important;
          border-style: solid;
          border-width: 1px;
          border-color: var(--inputbc);
          outline: none;
          height: 70px;
          border-radius: 3px;
        }
      }
      .footer {
        .btn {
          width: 100px;
          height: 40px;
        }
      }
      }
    }
  }
}
</style>
